import React from 'react';
import {
    ActivityIndicator,
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList, TouchableOpacity,
    DeviceEventEmitter
} from 'react-native';

//引入
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import Styles from './Styles';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Utils from "../../utils/Utils";

const { width, height } = Dimensions.get('window')

export default class CateLists extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            gid: 0,
            type: 0,
            days: 7,
            page: 0,
            rows: 10,
            total: 0,
            totalpage: 1,
            lists: [],
            loaded: true,
            refreshing: false,
        };
        this.listener = null;
    }
    static navigationOptions = {
        //title: '彩票咨询',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#ff0000',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {

    }
    componentWillUnmount() {
        //卸载键盘隐藏事件监听
        if (this.listener != null) {
            this.listener.remove();
        }
    }
    componentDidMount() {
        this.listener = DeviceEventEmitter.addListener('updateCateLists', (value) => {
            //这里面是要调用的方法，比如：刷新
            //value:是下面页面在 通知 时 ，所传递过来的参数
            this.setState({
                gid: value.gid,
                page: 0,
                rows: 10,
                total: 0,
                totalpage: 1,
                lists: [],
            }, () => {
                this.getServerData(() => { });
            });

        });
        this.setState({
            gid: this.props.gid,
            type: this.props.type
        }, () => {
            this.getServerData(() => { });
        })

    }
    getServerData(callback) {
        if(!Ugame.isLogin()){
            return;
        }
        let _this = this;
        let params = {};
        let gid = this.state.gid;
        let type = this.state.type;
        let days = this.state.days;
        let page = this.state.page;
        let rows = this.state.rows;
        let lists = this.state.lists;
        if (page == 1) {
            lists = [];
        }
        params.gid = gid;
        params.type = type;
        params.page = page + 1;
        params.rows = rows;
        params.days = days;
        params.token=Ugame.info.Token
        Httpc.get(REQUEST.FollowOrderGetList, params, function (res) {
            _this.setState({
                type: type,
                page: page + 1,
                rows: rows,
                total: res.total,
                totalpage: res.totalpage,
                lists: lists.concat(res.Data),
            });
            callback();
        })
    }
    _on_FollowDetailed = (GameId, id) => {
        if (Ugame.isLogin()) {
            this.props.navigation.navigate('FollowDetailed', {
                GameId: GameId,
                id: id,
                isFollow: 1,//1可以跟单0不可以
            });
        } else {
            this.props.navigation.navigate('Login');
        }

    }
    rendType = (item) => {
        switch (this.state.type) {
            case 1:
                return (
                    <View style={{ position: 'absolute', right: 0, alignItems: 'center' }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
                            <Text style={{ fontSize: 20, color: '#d0162e', fontWeight: 'bold' }}>{Number(item.mark).toFixed(2)}</Text>
                            <Text style={{ fontSize: 12, color: '#d0162e' }}>%</Text>
                        </View>
                        <Text style={{ fontSize: 12, color: '#d0162e' }}>命中率</Text>
                    </View>
                );
                break;
            case 2:
                return (
                    <View style={{ position: 'absolute', right: 0, alignItems: 'center' }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
                            <Text style={{ fontSize: 20, color: '#d0162e', fontWeight: 'bold' }}>{Number(item.mark).toFixed(2)}</Text>
                            <Text style={{ fontSize: 12, color: '#d0162e' }}>%</Text>
                        </View>
                        <Text style={{ fontSize: 12, color: '#d0162e' }}>盈利率</Text>
                    </View>
                );
                break;
            case 3:
                return (
                    <View style={{ position: 'absolute', right: 0, alignItems: 'center' }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
                            <Text style={{ fontSize: 20, color: '#d0162e', fontWeight: 'bold' }}>{Number(item.mark)}</Text>
                            <Text style={{ fontSize: 12, color: '#d0162e',marginTop:7}}>人</Text>
                        </View>
                        <Text style={{ fontSize: 12, color: '#d0162e' }}>带红人数</Text>
                    </View>
                );
                break;
            case 4:
                return (
                    <View>
                    </View>
                );
                break;
        }

    }
    _createNewsItem = ({ item }) => {
        if(item == null){
            return (<View></View>);
        }        
        let { type } = this.state;
        return (
            <View style={Styles.recommend_lists}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 24 }}>
                    <Image resizeMode="cover" style={{ width: 44, height: 44, borderRadius: 44 }} source={require('../../image/js_img_user_head.png')} />
                    <TouchableOpacity onPress={() => this._on_FollowDetailed(item.GameId, item.id)}>
                        <View style={{ marginLeft: 8 }}>
                            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                <Text style={{ color: '#333333' }}>{item.nick}</Text>
                            </View>
                            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                <Text style={{ fontSize: 12, color: '#77baf6', borderColor: '#77b1f6', borderWidth: 0.5, paddingLeft: 5, paddingRight: 5, paddingTop: 2, paddingBottom: 2, marginRight: 5, marginTop: 2, borderRadius: 3 }}>
                                    {item.GameName}
                                </Text>
                                <Text style={{ fontSize: 12, color: '#999999' }}>{!!item.endtime?(item.endtime.substr(5, 11)):null}截止</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                    {this.rendType(item)}

                </View>
                {!!item.Metro ?
                    <TouchableOpacity onPress={() => this._on_FollowDetailed(item.GameId, item.id)}>
                        <Text style={{ color: '#999999', lineHeight: 20, marginTop: 10, textAlign: 'left', width: width - 24 }}>{item.Metro}</Text>
                    </TouchableOpacity> :
                    null
                }
                <TouchableOpacity onPress={() => this._on_FollowDetailed(item.GameId, item.id)}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width - 24, borderRadius: 3, backgroundColor: '#f0f4f8', height: 50, marginTop: 10 }}>
                        <View style={{ width: (width - 24) / 5, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#333333' }}>{item.OrderCoin}</Text>
                            <Text style={{ color: '#999999' }}>订单总额</Text>
                        </View>
                        <View style={{ width: (width - 24) / 5, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#333333' }}>{item.SelfCoin}</Text>
                            <Text style={{ color: '#999999' }}>自购金额</Text>
                        </View>
                        <View style={{ width: (width - 24) / 5, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#333333' }}>{item.SingleCoin}</Text>
                            <Text style={{ color: '#999999' }}>单倍金额</Text>
                        </View>
                        <View style={{ width: (width - 24) / 5, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#333333' }}>{item.FollowNum}</Text>
                            <Text style={{ color: '#999999' }}>跟单人数</Text>
                        </View>
                        <Text style={{ width: (width - 24) / 5, backgroundColor: '#d0162e', height: 50, textAlign: 'center', color: '#ffffff', lineHeight: 50, borderTopRightRadius: 3, borderBottomRightRadius: 3 }}>跟单</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
    _onRefresh = () => {
        if(!Ugame.isLogin()){
            return;
        }
        if (this.state.refreshing) {
            return;
        }
        this.setState({ refreshing: true });
        let _this = this;
        let params = {};
        let { gid, type, rows, days } = this.state;
        params.gid = gid;
        params.type = type;
        params.page = 1;
        params.rows = rows;
        params.days = days;
        params.token=Ugame.info.Token
        Httpc.get(REQUEST.FollowOrderGetList, params, function (res) {
            _this.setState({
                type: type,
                page: 1,
                rows: rows,
                total: res.total,
                totalpage: res.totalpage,
                lists: res.Data,
            });
            _this.setState({ refreshing: false });
        })
    }
    _onEndReached() {
        if (this.state.page < this.state.totalpage) {
            this.getServerData(() => { });
        }

    }
    _separator() {
        return <View style={{ height: 0.5, backgroundColor: '#ededed' }} />;
    }
    render() {
        let { lists } = this.state;
        if(lists.length==0 ){
            return (<View></View>);
        }
        return (
            <View style={Styles.container}>
                <FlatList
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                    data={lists}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this._createNewsItem}
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={0.1}
                    ItemSeparatorComponent={this._separator}
                />
            </View>
        )
    }



}
